<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      :title="!dataForm.id ? $t('add') : $t('update')"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="60%"
      top="70px"
      @opened="opened()"
    >
      <div class="dialogInner">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'"
          :disabled="disabled"
          :validate-on-rule-change="false"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="dataForm.name" placeholder="名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区域" prop="scenicId">
                <el-select
                  v-model="dataForm.scenicId"
                  placeholder="所属区域"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in scenicOptions"
                    :key="item.id"
                    :label="item.scenicName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型" prop="type">
                <ren-select
                  v-model="dataForm.type"
                  dict-type="map_type"
                  placeholder="请选择类型"
                  style="width: 100%"
                ></ren-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否打卡点" prop="clockFlag">
                <el-radio-group v-model="dataForm.clockFlag">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-if="jingqushow2">
              <el-form-item label="是否入驻" prop="flag">
                <el-radio-group v-model="dataForm.flag">
                  <el-radio :label="1">入驻</el-radio>
                  <el-radio :label="0">不入驻</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
             <el-col :span="12">
              <el-form-item label="建议游玩时长" prop="suggestTime">
                <el-input
                  v-model="dataForm.suggestTime"
                  placeholder="建议游玩时长"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="jingqushow1">
              <el-form-item label="公共场馆类型" prop="typeradio">
                <el-radio-group v-model="dataForm.typeradio">
                  <el-radio :label="2">文化场馆</el-radio>
                  <el-radio :label="3">文化站</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经纬度" prop="lonandLat">
                <el-input
                  v-model="dataForm.lonandLat"
                  style="width: 60%; margin-right: 10px"
                ></el-input>
                <el-button type="primary" size="mini" @click="mapCli()"
                  >地图选点</el-button
                >
              </el-form-item>
            </el-col>
           
            <el-col :span="12">
              <el-form-item label="大小" prop="size">
                <el-input v-model="dataForm.size" placeholder="大小"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="dataForm.remark"
                  placeholder="备注"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="remark">
                <el-input
                  v-model="dataForm.address"
                  placeholder="详细地址"
                ></el-input>
              </el-form-item>
              <!--<el-form-item label="地址" prop="province">-->
              <!--<el-select v-model="dataForm.province" :placeholder="disabled?'':'省编码'" clearable style="width:14%" @change="-->
              <!--(val) => {-->
              <!--regionChange(val, 'province');-->
              <!--}-->
              <!--">-->
              <!--<el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">-->
              <!--</el-option>-->
              <!--</el-select>-->
              <!--<el-select v-model="dataForm.city" :placeholder="disabled?'':'市'" clearable style="width:14%;margin:0 1%" @change="-->
              <!--(val) => {-->
              <!--regionChange(val, 'city');-->
              <!--}-->
              <!--">-->
              <!--<el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">-->
              <!--</el-option>-->
              <!--</el-select>-->
              <!--<el-select v-model="dataForm.area" :placeholder="disabled?'':'区'" clearable style="width:14%" @change="-->
              <!--(val) => {-->
              <!--regionChange(val, 'area');-->
              <!--}-->
              <!--">-->
              <!--<el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">-->
              <!--</el-option>-->
              <!--</el-select>-->
              <!--<el-input style="width:14%;margin:0 1%" v-model="dataForm.street" :placeholder="disabled?'':'街道'"></el-input>-->
              <!--<el-input v-model="dataForm.address" :placeholder="disabled?'':'详细地址'" style="width:40%"></el-input>-->
              <!--</el-form-item>-->
            </el-col>
            <el-col :span="24">
              <el-form-item label="详情介绍" prop="info">
                <el-input
                  v-model="dataForm.info"
                  placeholder="详情介绍"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <p class="pdl60" :class="isMstj?'imgLabel2':''">
                导览点位缩略图<span
                  >(支持png、jpg，建议尺寸210*236px，最多1张)</span
                >
              </p>
            </el-col>

            <el-col :span="24">
              <el-form-item label="" prop="coverImage">
                <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :on-success="
                    (res, file, fileList) => successHandle1(res, file, fileList)
                  "
                  :before-upload="
                    (file) => beforeUploadHandle(file, 1, [21, 23.6])
                  "
                >
                  <img v-if="dataForm.pic" :src="dataForm.pic" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <p class="pdl60">
                导览点位详情图<span
                  >(支持png、jpg，建议宽度690px*最多10张)</span
                >
              </p>
            </el-col>
            <el-col :span="24">
              <el-form-item label="" prop="">
                <el-upload
                  :preview-src-list="dataForm.picList"
                  :action="url"
                  :file-list="fileListtwo"
                  :limit="10"
                  :before-upload="
                    (file) => beforeUploadHandle(file, 2, [69, 75])
                  "
                  list-type="picture-card"
                  :on-success="successHandletwo"
                  :on-remove="handleRemovetwo"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!--地图-->
      <template slot="footer" v-if="!disabled">
        <el-button @click="resetForm">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()"
          >{{ $t("confirm") }}
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      width="50%"
      :visible.sync="mapShow"
      title="地图选点"
      top="70px"
    >
      <mapdiv
        ref="mapDiv"
        style="width: 96%; margin: 0 auto 20px"
        :longitude="dataForm.longitude"
        :latitude="dataForm.latitude"
        @getPos="getPosVal($event)"
      >
      </mapdiv>
    </el-dialog>
    <!-- 裁剪框 -->
    <cropper-dlg
      v-if="showCropper"
      :dialogVisible.sync="showCropper"
      :img-file="currentFile"
      :fixedNumber="fixedNumber"
      ref="vueCropper"
      @upload="cropperUpload"
    ></cropper-dlg>
  </div>
</template>

<script>
import mapdiv from "./map2";
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";

export default {
  mixins: [mixinRegionModule],
  components: {
    mapdiv,
  },
  data() {
    return {
      currentFile: "",
      fixedNumber: [21, 24],
      cropperIndex: null,
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
      jingqushow: false,
      jingqushow1: false,
      jingqushow2: false,
      mapShow: false,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogImageUrltwo: "",
      dialogVisibletwo: false,
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      fileList: [],
      fileListtwo: [],
      scenicOptions: [],
      options: [
        {
          dictValue: 1,
          dictLabel: "景点打卡",
        },
        {
          dictValue: 2,
          dictLabel: "酒店民宿",
        },
        {
          dictValue: 3,
          dictLabel: "餐饮美食",
        },
        {
          dictValue: 4,
          dictLabel: "特色体验",
        },
        {
          dictValue: 5,
          dictLabel: "休闲娱乐",
        },
        {
          dictValue: 6,
          dictLabel: "停车场",
        },
        {
          dictValue: 7,
          dictLabel: "公共场馆",
        },
        {
          dictValue: 8,
          dictLabel: "公共服务",
        },
        {
          dictValue: 9,
          dictLabel: "公交车站",
        },
        {
          dictValue: 10,
          dictLabel: "公共厕所",
        },
      ],
      dataRule: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        flag: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        lonandLat: [
          {
            required: true,
           message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
         scenicId: [
          {
            required: true,
            message: "请选择所属区域",
            trigger: "change",
          },
        ],
      },
      dataRuleCopy:null,
      visible: false,
      dataForm: {
        id: "",
        name: "",
        longitude: "",
        latitude: "",
        type: "",
        info: "",
        remark: "",
        pic: "",
        picList: "",
        size: "",
        lonandLat: "",
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
        scenicId: "",
        typeradio: "",
        clockFlag: "",
        suggestTime: "",
        flag: "",
      },
      isMstj:false
    };
  },
  created() {
    this.dataRuleCopy = JSON.parse(JSON.stringify(this.dataRule))
    this.getScenicOptions();
    //DOM初始化完成进行地图初始化
  },
  beforeDestroy() {
    if (!this.map) {
      return;
    }
    this.map.destroy();
    this.map = null;
  },
  watch: {
    "dataForm.type"(newval, oldval) {
      if (newval != oldval) {
        this.newschange();
      }
    },
  },
  methods: {
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
    newschange() {
      if (this.dataForm.type == 1) {
        this.jingqushow = true;
        this.jingqushow1 = false;
      } else if (this.dataForm.type == 7) {
        this.jingqushow1 = true;
        this.jingqushow = false;
      } else {
        this.jingqushow = false;
        this.jingqushow1 = false;
      }

      if (this.dataForm.type == 1) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 2) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 3) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 4) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 7) {
        this.jingqushow2 = true;
      } else {
        this.jingqushow2 = false;
      }

      //11为官方推荐
      if(this.dataForm.type==11){
        this.isMstj = true;
        let clone = JSON.parse(JSON.stringify(this.dataRuleCopy));
        delete clone.scenicId
        delete clone.lonandLat
        this.dataRule = clone;
      }else{
        this.isMstj = false;
        this.dataRule = this.dataRuleCopy;
      } 
      this.$nextTick(()=>{
        this.$refs.dataForm && this.$refs.dataForm.clearValidate();
      })
    },

    opened() {
      if (this.dataForm.type == 1) {
        this.jingqushow = true;
        this.jingqushow1 = false;
      } else if (this.dataForm.type == 7) {
        this.jingqushow1 = true;
        this.jingqushow = false;
      } else {
        this.jingqushow = false;
        this.jingqushow1 = false;
      }
      if (this.dataForm.type == 1) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 2) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 3) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 4) {
        this.jingqushow2 = true;
      } else if (this.dataForm.type == 7) {
        this.jingqushow2 = true;
      } else {
        this.jingqushow2 = false;
      }

      this.provincAreaDetailInfoList();
      if (this.dataForm.city) {
        this.cityAreaDetailInfoList(this.dataForm.province);
      }
      if (this.dataForm.area) {
        this.countyAreaDetailInfoList(this.dataForm.city);
      }
    },
    mapCli() {
      this.mapShow = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.initMap();
      });
    },
    getPosVal(obj) {
      this.mapShow = false;
      this.dataForm.latitude = obj.lat;
      this.dataForm.longitude = obj.lon;
      this.dataForm.lonandLat = obj.lon + "," + obj.lat;
    },
    // 上传之前
    beforeUploadHandle(file, index, fixedNumber) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.showCropper = true;
        if (fixedNumber) {
          this.fixedNumber = fixedNumber;
        } else {
          this.fixedNumber = [];
        }
        this.$nextTick(() => {
          this.cropperIndex = index;
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },
    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            if (this.cropperIndex == 1) {
              this.successHandle1(res.data);
            } else {
              this.successHandletwo(res.data);
            }
          }
        });
      }
    },
    // 上传成功
    successHandle1(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.dataForm.pic = res.data.url;
    },
    handleRemovetwo(file, fileList) {
      this.fileListtwo = fileList.map((item) => {
        return item;
      });
      // if (fileList.length == 0) {
      //   this.dataForm.picList = "";
      // } else {
      //   this.dataForm.picList = fileList
      //     .map((item) => {
      //       return item.url;
      //     })
      //     .toString();
      // }
    },
    // 上传成功
    successHandletwo(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.fileListtwo.unshift({
        name: "",
        url: res.data.url,
      });
      this.dataForm.picList = this.fileListtwo
        .map((item) => {
          return item.url;
        })
        .toString();
    },
    close() {
      this.dataForm = {
        id: "",
        name: "",
        longitude: "",
        latitude: "",
        type: "",
        info: "",
        status: "",
        remark: "",
        delFlag: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
        pic: "",
        picList: "",
        size: "",
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
        typeradio: "",
        clockFlag: "",
        suggestTime: "",
        flag: "",
      };
      this.isMstj = false;
      this.$emit("changeDisabled");
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.fileList = [];
      this.$http
        .get("/sys/ismap/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.lonandLat =
            this.dataForm.longitude + "," + this.dataForm.latitude;
          if (this.dataForm.pic) {
            this.fileList = [
              {
                name: "",
                url: this.dataForm.pic,
              },
            ];
          } else {
            this.fileList = [];
          }

          if (this.dataForm.picList) {
            let lsdata = this.dataForm.picList.split(",");
            this.fileListtwo = lsdata.map((item, index, arr) => {
              let json = {};
              json.name = "";
              json.url = item;
              return json;
            });
          } else {
            this.fileListtwo = [];
          }
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle(formName) {
      // this.dataForm.picList=null;

      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if(this.isMstj&&!this.dataForm.pic) return this.$message.error("请上传导览点位缩略图");

          this.$http[!this.dataForm.id ? "post" : "put"](
            "/sys/ismap/",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.fileList = [];
              this.fileListtwo = [];
              // this.dataForm = {
              //   id: "",
              //   name: "",
              //   longitude: "",
              //   latitude: "",
              //   type: "",
              //   info: "",
              //   status: "",
              //   remark: "",
              //   delFlag: "",
              //   creator: "",
              //   createDate: "",
              //   updater: "",
              //   updateDate: "",
              //   pic: "",
              //   picList: "",
              //   size: "",
              //   province: "",
              //   city: "",
              //   area: "",
              //   street: "",
              //   address: "",
              //   typeradio: "",
              //   flag: "",
              // };
              this.isMstj = false;
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.isMstj = false;
      this.fileList = [];
      this.fileListtwo = [];
      this.dataForm = {
        id: "",
        name: "",
        longitude: "",
        latitude: "",
        type: "",
        info: "",
        status: "",
        remark: "",
        delFlag: "",
        creator: "",
        createDate: "",
        updater: "",
        updateDate: "",
        pic: "",
        picList: "",
        size: "",
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
        typeradio: "",
        flag: "",
      };
      this.$refs.dataForm.resetFields();
      this.visible = false;
    },
  },
  props: {
    disabled: Boolean,
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 400px;
  position: relative;
}

.Addresssearch {
  position: absolute;
  top: 10px;
  left: 20px;
  height: 50px;
  width: 900px;
  z-index: 88;
  background: #fff;
  padding: 5px 0 0 10px;
}
  ::v-deep .imgLabel {
    & > label::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  ::v-deep .imgLabel2 {
    &::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
</style>
